import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import HomeView from '../views/home/HomeIndex.vue'
import KindView from '../views/kind/index.vue'
import CartView from '../views/cart/index.vue'
import UserView from '../views/user/index.vue'

import DetailView from '../views/detail/index.vue'


import Footer from '../components/Footer.vue'

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/:pathMatch(.*)*',
      name: 'NotFound',
      component: () => import('../views/error/index.vue')
    },
    {
      path: '/',
      // redirect 配置路由重定向
      redirect: '/home'
    },
    {
      path: '/home',
      name: 'home',
      meta: {
        title: '首页'
      },
      // 命名视图
      components: {
        default: HomeView,
        footer: Footer
      }
    },
    {
      path: '/kind',
      name: 'kind',
      meta: {
        title: '分类'
      },
      components: {
        default: KindView,
        footer: Footer
      },
      // 该守卫只针对当前路由
      beforeEnter: (to, from) => {
        // reject the navigation
        // return false
        console.log('路由独享守卫');

      },
    },
    {
      path: '/cart',
      meta: {
        title: '购物车'
      },
      name: 'cart',
      components: {
        default: CartView,
        footer: Footer
      }
    },
    {
      path: '/user',
      meta: {
        title: '用户'
      },
      name: 'user',
      components: {
        default: UserView,
        footer: Footer
      }
    },
    {
      path: '/detail',
      name: 'detail',
      component: DetailView,
      meta: {
        hidden: true,
        title: '详情'
      },
    },
    {
      path: '/login',
      name: 'login',
      // meta 是路由的元信息
      meta: {
        // 用来判断是否需要显示 footer
        hidden: true,
        title: '登录'
      },
      component: () => import('../views/login/index.vue')
    }, {
      path: '/register',
      name: 'register',
      meta: {
        hidden: true,
        title: '注册'
      },
      redirect: '/register/step1',
      component: () => import('../views/register/index.vue'),
      children: [
        {
          path: 'step1',
          name: 'step1',
          component: () => import('../views/register/step1.vue'),
        },
        {
          path: 'step2',
          name: 'step2',
          component: () => import('../views/register/step2.vue'),
        },
        {
          path: 'step3',
          name: 'step3',
          component: () => import('../views/register/step3.vue'),
        }
      ]
    }
  ]
})

/*
  路由守卫：
  1. 全局守卫
    beforeEach：全局前置守卫，可以做路由的鉴权(路由权限验证)，该守卫会在页面跳转之前执行
    beforeResolve：全局解析守卫，和前置守卫用法一直，含义大致相同，调用时机不同（在前置后执行）
    afterEach：全局后置守卫,跳转到页面路由之后调用的函数，我们在这里可以做一些调整完成后的操作

  2. 独享守卫
    beforeEnter： 路由独享守卫

  3. 组件内的守卫
    beforeRouteEnter：在渲染该组件的对应路由被验证前调用
    beforeRouteUpdate：在当前路由改变，但是该组件被复用时调用
    beforeRouteLeave：在导航离开渲染该组件的对应路由时调用

    onBeforeRouteUpdate： 更新
    onBeforeRouteLeave： 离开
*/

router.beforeEach(async (to, from, next) => {

  // to：是我们要进入的页面路由信息
  // from：离开前的页面路由信息
  // console.log(to, from);

  // 先判断进入购物车页面的时候是否登录
  if (to.path == '/cart') {
    // 在往购物车页面跳转
    // 加权限验证
    if (localStorage.getItem('loginState') != 'true') {
      // 没有登录
      next('/login')
    } else {
      next()
    }

  }


  // 路由放行
  next()

  // 返回 false 可以取消页面跳转，返回一个路由我们可以跳转页面
  // return false
})



// 路由解析守卫
// router.beforeResolve(async (to, from) => {
//   console.log(22222222);
// })

// 路由的后置守卫
router.afterEach((to, from) => {

  if (!to.meta.title) {
    to.meta.title = '快乐购'
  }
  document.title = String(to.meta.title)
})



export default router
